<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div class="table_content" style="margin-bottom: 1px">
            <el-row>
              <el-form
                inline
                label-position="left"
                class="demo-form-inline"
                label-width="100px"
              >
                <el-form-item class="clear_item-margin-bottom">
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus"
                    @click="newRole"
                    >新增角色
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table_content">
            <page-table
              ref="multipleSelection"
              :page-data="roleList"
              :loading="loading"
              :do-get-page-data="getRoleList"
            >
              <el-table-column
                prop="id"
                label="编号"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="name"
                label="角色名称"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="description"
                label="描述"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="管理"
                width="350"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="editRole(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="资源分配" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-s-tools"
                      @click="editMenus(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="流程分配" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-copy-document"
                      @click="handleDistributionWorkFlow(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="栏目分配" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-notebook-2"
                      @click="editColumn(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="分配用户" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-user"
                      @click="editUsers(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除角色" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="deleteRole(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
            <el-dialog
              :visible.sync="showRoleEditor"
              title="资源分配列表:"
              width="40%"
            >
              <el-row style="text-align: center">
                <el-col :span="24">
                  <el-button type="primary" size="mini" @click="saveRole()"
                    >保存
                  </el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="showRoleEditor = false"
                    >返回
                  </el-button>
                </el-col>
                <el-col :span="24" class="mt20">
                  <el-tree
                    class="filter-tree"
                    :data="menuList"
                    node-key="id"
                    :props="defaultProps1"
                    show-checkbox
                    default-expand-all
                    :filter-node-method="filterNode"
                    ref="tree"
                    check-strictly
                    highlight-current
                    :default-checked-keys="ckeckList"
                    @node-click="handleNodeClick"
                  ></el-tree>
                </el-col>
              </el-row>
            </el-dialog>
            <el-dialog
              :visible.sync="showColumnEditor"
              title="栏目分配列表:"
              width="25%"
            >
              <el-row style="text-align: center">
                <el-col :span="24" class="mt20">
                  <el-tree
                    class="filter-tree"
                    :data="myColumnList"
                    node-key="id"
                    :props="defaultProps"
                    show-checkbox
                    check-strictly
                    default-expand-all
                    :filter-node-method="filterNode"
                    ref="columnTreeRef"
                    highlight-current
                    :default-checked-keys="columnCheckList"
                    @node-click="handleNodeClick"
                  ></el-tree>
                </el-col>
                <el-col :span="24">
                  <el-button type="primary" size="mini" @click="saveColumn()"
                    >保存
                  </el-button>
                  <el-button size="mini" @click="showColumnEditor = false"
                    >返回
                  </el-button>
                </el-col>
              </el-row>
            </el-dialog>
            <el-dialog
              :visible.sync="showRoleView"
              title="编辑/新增 角色:"
              width="40%"
            >
              <el-row>
                <el-col :span="24" class="mt20">
                  <el-form
                    ref="roleViews"
                    :rules="rules"
                    :model="roleView"
                    label-width="90px"
                  >
                    <el-form-item label="角色名称:" prop="name">
                      <el-input
                        placeholder="请输入角色名称"
                        v-model="roleView.name"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="描述:" prop="description">
                      <el-input
                        placeholder="请添加角色描述"
                        type="textarea"
                        :rows="3"
                        v-model="roleView.description"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveRoleView()"
                  >保存
                </el-button>
                <el-button @click="showRoleView = false">取消</el-button>
              </div>
            </el-dialog>
            <el-dialog
              :visible.sync="showUserEditor"
              title="用户分配列表:"
              width="50%"
            >
              <el-row style="text-align: center">
                <el-col :span="24">
                  <el-button type="primary" size="mini" @click="saveRole()"
                    >保存
                  </el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="showUserEditor = false"
                    >返回
                  </el-button>
                </el-col>
              </el-row>
            </el-dialog>
            <el-dialog
              :visible.sync="showDistributionWorkflow"
              title="流程分配:"
              @close="distribution"
              width="69.1%"
            >
              <distribution-workflow
                ref="workflow"
                :role-id="roleId"
              ></distribution-workflow>
            </el-dialog>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>

<script>
import { mapGetters } from "vuex";
import distributionWorkflow from "./distributionWorkflow.vue";
import Status from "@/libs/status";

export default {
  name: "role",
  created() {
    this.getMenuList();
    this.getColumnTree();
    this.getRoleList(1);
  },
  mounted() {},
  data() {
    return {
      loading: false,
      showRoleEditor: false,
      showColumnEditor: false,
      showRoleView: false,
      showUserEditor: false,
      showDistributionWorkflow: false,
      defaultProps: {
        children: "children",
        label: "name"
      },
      defaultProps1: {
        children: "children",
        label: "label"
      },

      rules: {
        name: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 30, message: "长度在 3 到 30 个字符", trigger: "blur" }
        ]
      },
      roleId: "",
      ckeckList: [],
      columnCheckList: [], // 栏目选择集合
      value4: [],
      searchDto: {
        startTime: "",
        pageSize: 10,
        endTime: "",
        showData: 1
      },
      columnDto: {
        itemIds: [],
        roleId: ""
      }
    };
  },
  computed: {
    ...mapGetters({
      currentRoleList: "currentRoleList",
      menuList: "menuList",
      roleList: "roleList",
      roleView: "roleView",
      appList: "appList",
      updateSearchBtn: "updateSearchBtn",
      columnRoleList: "columnRoleList",
      columnTree: "columnTree",
      myColumnList: "myColumnList"
    })
  },
  watch: {
    currentRoleList(val) {
      //树形回显
      this.$refs.tree.setCheckedNodes([]); //清空树状
      this.ckeckList = val; //每次添加值
    },
    columnRoleList(val) {
      //树形回显
      this.$refs.columnTreeRef.setCheckedNodes([]); //清空树状
      this.columnCheckList = val; //每次添加值
    },
    showRoleView(val) {
      if (val == false) {
        this.roleId = "";
      }
    }
  },
  methods: {
    distribution() {
      let tem = {
        roleId: this.roleId,
        workflowIds: this.$refs.workflow.workflowIds
      };
      this.API.addOrUpdateRoleWorkflow({ body: tem });
    },
    //  获取资源菜单
    getMenuList() {
      this.$store
        .dispatch("resourceTreeUsingPOSTS", {
          parentId: 0
        })
        .then(ret => {});
    },
    //获取栏目
    getColumnTree() {
      // 栏目分页
      // this.$store.dispatch("columnTreeUsingGETS").then(ret => {});
      // 栏目不分页
      this.$store.dispatch("getMyColumnList").then(ret => {});
    },
    //  获取角色列表
    getRoleList(val) {
      let param = Object.assign(this.searchDto, val);
      this.$store.dispatch("roleListUsingPOSTS", param).then(ret => {
        console.log("ret", ret);
      });
    },
    //tree过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //新增角色
    newRole() {
      this.roleId = "";
      this.$store.commit("INIT_ROLE_VIEW");
      this.showRoleView = true;
    },
    //编辑角色
    editRole(row) {
      this.roleId = row.id;
      let tem = {
        id: row.id
      };
      this.$store.dispatch("roleViewUsingPOSTS", tem).then(ret => {});
      this.showRoleView = true;
    },
    //新增或编辑角色
    saveRoleView() {
      let tem = {
        body: this.roleView
      };
      this.$refs["roleViews"].validate(valid => {
        if (valid) {
          this.$store.dispatch("roleSaveUsingPOSTS", tem).then(ret => {
            this.success("操作成功");
            this.$store.commit("INIT_ROLE_VIEW");
            this.roleId = "";
            this.getRoleList();
          });
          this.showRoleView = false;
        } else {
          return false;
        }
      });
    },
    //角色删除
    deleteRole(row) {
      this.$confirm("确认删除当前角色?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.$store.dispatch("roleDelUsingPOSTS", tem).then(ret => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getRoleList();
          });
        })
        .catch(() => {});
    },
    handleDistributionWorkFlow(row) {
      this.roleId = row.id;
      this.showDistributionWorkflow = true;
    },
    //资源分配回显
    editMenus(row) {
      this.roleId = row.id;
      let tem = {
        roleId: row.id
      };
      this.$store.dispatch("roleResListS", tem).then(ret => {});
      this.showRoleEditor = true;
    },
    //保存资源分配列表
    saveRole() {
      let param = [];
      this.$refs.tree.getCheckedNodes().map(a => {
        param.push(a.id);
      });
      let tem = {
        body: {
          resourceIds: param,
          roleId: this.roleId
        }
      };
      this.$store.dispatch("ResRoleSaveUsingPOSTS", tem).then(ret => {
        this.$message({
          message: "添加成功",
          type: "success"
        });
        this.showRoleEditor = false;
      });
    },
    //栏目分配
    editColumn(row) {
      this.roleId = row.id;
      let params = {
        roleId: row.id
      };
      this.$store.dispatch("getColumnRoleUsingGETS", params).then(ret => {});
      this.showColumnEditor = true;
    },

    //栏目-角色-保存
    saveColumn() {
      let param = [];
      this.$refs.columnTreeRef.getCheckedNodes().map(a => {
        param.push(a.id);
      });

      this.columnDto.itemIds = param;
      this.columnDto.roleId = this.roleId;

      this.$store
        .dispatch("saveColumnRoleUsingPOSTS", {
          body: this.columnDto
        })
        .then(ret => {
          this.$message({
            message: "栏目分配成功",
            type: "success"
          });
          this.showColumnEditor = false;
        });
    },
    //用户分配
    editUsers(row) {
      this.$router.push({
        name: "disUser",
        query: {
          roleId: row.id
        }
      });
    },
    handleNodeClick(val) {
      this.clickID = val.id;
    }
  },
  components: {
    distributionWorkflow
  }
};
</script>

<style scoped lang="less">
.filter-tree {
  padding-bottom: 30px;

  /deep/ .el-tree-node__label {
    font-size: 16px;
  }
}
</style>
